<template>
    <!-- 安全专家分类设置列表 -->
    <base-breadcrumb>
        <div class="page-body">
            <a-card :bordered="false">
                <!-- <title-name title=" 安全专家分类设置" /> -->
                <div class="table-operateors mb20">
                    <a-button icon="plus" type="primary" @click="handleUpdate('add')" v-if="hideBuquBtn()">新增</a-button>
                </div>
                <list-table
                    ref="table"
                    size="default"
                    rowKey="id"
                    :columns="columns"
                    :request="loadData"
                    :isScrollX="false"
                    :alert="true"
                    show-size-changer
                    show-quick-jumper
                   :showPage="false"
                >
                    <template slot="enabled" slot-scope="text, record">
                        <status-display
                            :status-code="record.enabled"
                            :status-map="{
                                true: {
                                    label: '可用',
                                    color: 'green',
                                },
                                false: {
                                    label: '不可用',
                                    color: 'red',
                                },
                            }"
                        />
                    </template>
                    <template slot="operator" slot-scope="text, record">
                        <a class="base-btn" @click="handleUpdate('edit', record)" v-if="hideBuquBtn()">编辑</a>
                        <a-divider type="vertical"  v-if="hideBuquBtn()" />
                        <a class="base-btn" @click="handleUpdate('del', record)" v-if="hideBuquBtn()">删除</a>
                    </template>
                </list-table>
            </a-card>
        </div>
        <updatesecurity-experts-cla
            v-if="visible.update"
            :init-data="childInitData"
            @cancel="visible.update = false"
            @confirm="handleUpdateConfirm"
        />
    </base-breadcrumb>
</template>

<script>
import StatusDisplay from '@/components/StatusDisplay'
import { getSelectListByType ,delSelectListByType } from '@/api/safetySupervision/common.js'
import updatesecurityExpertsCla from './updatesecurityExpertsCla'
import { STable } from '@/components'
export default {
    name:'a'+Date.now(),    components: {
        STable,
        updatesecurityExpertsCla,
        StatusDisplay,
    },
    data() {
        return {
            childInitData: {},
            visible: {
                update: false,
            },
            columns: [
                {
                    title: '分类名称',
                    width:300,
                    dataIndex: 'name',
                },
                {
                    title: '状态',
                    dataIndex: 'enabled',
                    width:100,
                    scopedSlots: { customRender: 'enabled' },
                },
                {
                    title: ' 操作',
                    dataIndex: 'operator',
                    width:200,
                    scopedSlots: { customRender: 'operator' },
                },
            ],
            queryParam: {
                type: 22,
            },
            loadData: async (parameter) => {
                const requestParameters = Object.assign({}, parameter, this.queryParam)
                const [err, res] = await getSelectListByType(requestParameters)
                return new Promise((resolve, reject) => {
                    if (err) {
                        reject(err)
                    } else {
                        resolve(res)
                    }
                })
            },
        }
    },
    methods: {
        handleUpdateConfirm() {
            this.visible.update = false
            this.$refs.table.refresh(true)
        },
        async delSelectListByType(data) {
            const [err, res] = await delSelectListByType({ id: data.id })
            if (!err) {
                this.$message.success('成功')
                this.$refs.table.refresh(true)
            }
        },
        // 处理更新操作（新增、编辑）
        handleUpdate(type, data = {}) {
            if (type == 'del') {
                let that = this

                this.$confirm({
                    title: '温馨提示',
                    content: '确定是否删除数据？',
                    okText: '确认',
                    okType: 'danger',
                    cancelText: '取消',
                    onOk: () => {
                        return that.delSelectListByType(data)
                    },
                })
            } else {
                this.childInitData = {
                    ...data,
                    pageType: type,
                }
                this.visible.update = true
            }
        },
    },
}
</script>

<style lang="less" scoped>
.page-header {
    .header-row {
        display: flex;
        .flex-content {
            flex: auto;
        }
        .divider {
            margin: 0 12px;
        }
        .expand-btn {
            margin-left: 8px;
            font-size: 14px;
        }
    }
}
.page-body {
    .table-operateors {
        .ant-btn + .ant-btn {
            margin-left: 12px;
        }
    }
}
</style>
